/**
 * 通用 class 样式
 */

// 全局
*{box-sizing: border-box;}
html,body{margin: 0;padding: 0;}
ul{margin: 0;}
li{ list-style: none; }
a{text-decoration: none;}
table {border-collapse:collapse;}
.border{border: 1px solid red;}

.text-color{
    color: #fff;
}

.big-size{
    font-size: 4em;
}
.default-size{
    font-size: 1.4em;
}
.small-size{
    font-size: 14px;
}
// 宽高全屏
.w-100vw{ width: 100vw; }
.h-100vh{ width: 100vh; }
//宽高占满
.w-100{ width: 100%; }
.h-100{ width: 100%; }

// 1. 元素类型
.dis-inline{display: inline-block;}
.dis-block{display: block;}

// 2. 布局相关
// 2.1定位
.relative {position: relative;}
.absolute {position: absolute;}
.fixed{position: fixed;}
.sticky{position: sticky;}
// abs 定位调整
.y-center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.x-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
// top bottom left right 调整


// 2.2 flex
.flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
}
/* flex 布局 */
.flex{
	/* #ifndef APP-PLUS-NVUE */
	display:flex;
	/* #endif */ 
	flex-direction:row;
}
.flex-row{ flex-direction:row!important; }
.flex-column{ flex-direction:column!important; }
.flex-row-reverse{ flex-direction:row-reverse!important; }
.flex-column-reverse{ flex-direction:column-reverse!important; }
.flex-wrap{ flex-wrap:wrap;}
.flex-nowrap{ flex-wrap:nowrap;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.align-center{ align-items: center; }
.align-stretch{ align-items: stretch; }
.align-start{ align-items: flex-start; }
.align-end{ align-items: flex-end; }
/* #ifndef APP-PLUS-NVUE */
.content-start {align-content: flex-start;}
.content-end {align-content: flex-end;}
.content-center {align-content: center;}
.content-between {align-content: space-between;}
.content-around {align-content: space-around;}
.content-stretch {align-content: stretch;}
/* #endif */
// 定义flex等分


// 2.3 布局相关处理
.overflow-hidden{overflow: hidden;}
.overflow-scroll{overflow: scroll;}

.z-max{ z-index: 999;} // u-view 的 最大是 10080, 底部的 tabbar 也设为了最大 10080
.z-second{ z-index: 9900; }
.z-third{ z-index: 9800; }
.z-min{z-index: -1;}


// 2.4 安全区域解决苹果X及底部有线条等机型
// 历遍生成4个方向的安全区


// 3. 元素修饰相关
// 文本相关
// 单行不换行
.no-wrap {white-space: nowrap;}
//超出部分文字隐藏（单行）
.over-clip {white-space: nowrap;text-overflow:clip;overflow: hidden;};
//超出部分文字隐藏（单行带省略号）
.over-ellipsis {white-space: nowrap;text-overflow:ellipsis;overflow: hidden;};
// 超出行数，自动显示行尾省略号，最多5行

//文字加粗
.bold {font-weight: bold;}
.normal {font-weight: normal;}
.lighter{font-weight: lighter;}
// 文字对齐
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
//文字划线
//下划线
.text-underline {text-decoration: underline}
.txtdec-und{text-decoration: underline;}
//文字下划虚线
.text-underline-dashed {border-bottom:1rpx dashed;}
//刪除线
.text-line-through{text-decoration: line-through}
.txtdec-thr{text-decoration: line-through;}
//缩进
.text-indent{text-indent:2em;}
